<template>
	<view class="box">
		{{msg}}
		<view v-for="data in listData" :key='data'>{{data}}</view>
		<button type="primary" size="mini" @click="reFresh">触发刷新</button>
		<view>
			<view>{{text}}</view>
			实现网络请求
			<button @click="getData">发送请求</button>
			<button @click="setStorage">设置缓存</button>
			<button @click="getStorage">获取缓存</button>
			<button @click="removeStorage">移除缓存</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				msg:'这是list的页面',
				listData:['bb','cc','dd'],
				text:"空"
			}	
		},
		//用来监听下拉监听事件,并进行相关的逻辑处理
		onPullDownRefresh() {
			console.log('触发下拉刷新');
			this.listData=['sa','sa'];
			//当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新
			uni.stopPullDownRefresh()
		},
		//触底事件
		onReachBottom() {
			
			console.log('触底时间触发了')
			
		},
		methods:{
			//通过点击方法触发刷新
			reFresh(){
				uni.startPullDownRefresh()
			},
			getData(){
				console.log('发起网络请求');
				// http://open.iciba.com/dsapi/
				uni.request({
					url:"http://open.iciba.com/dsapi/",
					//Access to XMLHttpRequest at 'http://open.iciba.com/dsapi/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
					header:{
						'Access-Control-Allow-Origin':'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'
					},
					success(res) {
						console.log(res);
						
					}
				})		
			},
			setStorage(){
				uni.setStorageSync('id',8080);
				console.log('设置缓存成功');
			},
			getStorage(){
				const id=uni.getStorageSync('id');
				console.log(id);
			},
			removeStorage(){
				uni.removeStorageSync('id');
			}
		}
	}
</script>

<style>
	.box{
		width: auto;
		height: 200px;
	}
	
</style>
